<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
<title>Recharge your account</title>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />
	<style>
.recharge_page {
	margin-left: 30%;
	margin-top: 5%;
	width: 325px;
	background-color: #35718D;
	color: #35718D;
}

.feild_input {
	float: left;
	margin-bottom: 4px;
	margin-top: 4px;
	width: 450px;
	height: 50px;
	margin-left: 10px;
}
.menu4 {
	box-shadow: 6px 11px 10px;
}
</style>
</h:head>

<h:body>

	<ui:insert name="header">
		<ui:include src="/header/header_dth.xhtml" />
	</ui:insert>
	<div style="text-align: center;">
		<div class="dth_body_home" style="min-height: 1070px">
			<ui:insert name="header_banner">
				<ui:include src="/header/header_banner.xhtml" />
			</ui:insert>
			<div class="dth_content">
				<p:ajaxStatus
					style="bottom: 68%;
				    height: 32px;
				    position: fixed;
				    right: 50%;
				    width: 32px;
				    z-index: 99999;">
					<f:facet name="start">
						<p:graphicImage value="images/loading.gif" />
					</f:facet>

					<f:facet name="complete">
						<h:outputText value="" />
					</f:facet>
				</p:ajaxStatus>
				<p:growl id="growl" showDetail="true" sticky="false" />
				<div style="background-color: #CA96D9; height: 100%">
					<div class="recharge_page"
						style="font-size: 20px; border-color: #CA96D9">
						<h:form id="recharge_page">
							<div>
								<div class="feild_input" style="margin-top: 32px;">
									<h:outputLabel value="#{msg['recharge_home_customerid']}" style="float:left"></h:outputLabel>
									<p:inputText value="#{rechargeBean.cusID}"
										disabled="#{loginBean.logined==true}"
										style="margin-left: 25px;height:20px;float: right;" size="30"></p:inputText>
									<h:inputHidden rendered="#{loginBean.logined==true}"
										value="#{rechargeBean.cusID}"></h:inputHidden>
								</div>
								<div class="feild_input">
									<div style="font-size: 20px; margin-left: 130px">
										<p:commandButton style="margin-top:10px;margin-bottom:50px;"
											disabled="#{loginBean.role==1 || loginBean.role==2 || loginBean.role==3}"
											update=":recharge_page,:growl,:recharge_page:tong"
											value="#{msg['btn_search']}" action="#{rechargeBean.search()}"></p:commandButton>
									</div>
									<h:outputText rendered="#{rechargeBean.cmessage==true}"
										style="color:red;text-algin:center;font-size:30px;font-weight:bold"
										value="#{rechargeBean.message}"></h:outputText>
								</div>

								<div class="feild_input" style="margin-top: 25px">
									<h:outputLabel value="#{msg['recharge_home_cardnumber']}" style="float:left"
										rendered="#{rechargeBean.searchID==true}"></h:outputLabel>
									<p:inputText disabled="true" value="#{rechargeBean.cardNum}"
										rendered="#{rechargeBean.searchID==true}"
										style="margin-left: 25px;height:20px;float: right;color:rgb(250, 3, 3)"
										size="30"></p:inputText>
									<br></br> <br></br>

								</div>
								<div class="feild_input">
									<h:outputLabel value="#{msg['recharge_home_movie_payment']}" style="float:left"
										rendered="#{rechargeBean.searchID==true}"></h:outputLabel>
									<p:inputText disabled="true"
										value="#{rechargeBean.priceMovieStr}$"
										style="margin-left: 25px;height:20px;float: right;color:rgb(250, 3, 3)"
										size="30" rendered="#{rechargeBean.searchID==true}"></p:inputText>
								</div>
								<div class="feild_input">
									<h:outputLabel value="#{msg['recharge_home_package_payment']}"
										style="float:left" rendered="#{rechargeBean.searchID==true}"></h:outputLabel>
									<p:inputText value="#{rechargeBean.pricePackageStr}$"
										disabled="true"
										style="margin-left: 25px;height:20px;float: right;color:rgb(250, 3, 3)"
										size="30" rendered="#{rechargeBean.searchID==true}"></p:inputText>
								</div>
								<div class="feild_input" style="margin-top: 5px">
									<h:outputLabel value="#{msg['recharge_home_month_number']}"
										style="float:left" rendered="#{rechargeBean.searchID==true}"></h:outputLabel>
									<p:inputText disabled="true" value="#{rechargeBean.numOMT}"
										style="margin-left: 20px;height:20px;float: right;color:rgb(250, 3, 3)"
										size="30" rendered="#{rechargeBean.searchID==true}"></p:inputText>
								</div>
								<div class="feild_input" style="margin-top: 20px">
									<h:outputLabel style="float:left" value="#{msg['recharge_home_total']}"
										rendered="#{rechargeBean.searchID==true}"></h:outputLabel>
									<p:inputText
										style="margin-left: 25px;height:20px;float: right;color:rgb(250, 3, 3)"
										value="#{rechargeBean.totalStr}$" size="30" disabled="true"
										rendered="#{rechargeBean.searchID==true}"></p:inputText>

								</div>

								<div class="feild_input">
									<h:inputHidden value="#{rechargeBean.total}" id="tong"></h:inputHidden>
									<p:commandLink update=":growl,:payment"
										oncomplete="PF('bar').show()">
										<f:param value="recharge" name="action"></f:param>
										<f:param value="#{rechargeBean.cusID}" name="cusID"></f:param>
										<f:param value="#{rechargeBean.total}" name="total"></f:param>
										<f:param value="#{rechargeBean.cardNum}" name="cardNum"></f:param>
										<p:graphicImage rendered="#{rechargeBean.searchID==true}"
											style="margin-top:30px;margin-bottom:5px" url="images/rc.jpg" />
									</p:commandLink>

								</div>

							</div>
						</h:form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<p:notificationBar id="payment" position="top" effect="slide"
		widgetVar="bar" styleClass="top"
		style="margin-left:20% ;width:800px;height:250px;border-radius:0px 0px 10px 10px;border-color:#35718D;border-width: 2px  ;">
		<div style="font-family: cursive; font-size: 25px;">
			<h:outputText value="Recharge" style="color:#FFCC00;font-size:36px;"></h:outputText>
			<br /> <br />
			<div style="float: left;margin-left: 20px">
				<h:outputText value="#{msg[recharge_home_payment_method]}"
					style="font-size: 20px;font-weight: bold;"></h:outputText>
				<p:selectOneListbox id="basic">
					<f:selectItem itemLabel="MasterCard" itemValue="1" />
					<f:selectItem itemLabel="OnePay" itemValue="2" />
					<f:selectItem itemLabel="VipCard" itemValue="3" />
				</p:selectOneListbox>
			</div>
			<div style="float: right;margin-right: 10px">
				<h:outputLabel value="ID card: ">
					<p:spacer width="20"></p:spacer>
				</h:outputLabel>
				<h:inputText style="height:30px" required="true"></h:inputText>
				<br />
				<h:outputLabel value="#{msg['recharge_home_pass']}">
					<p:spacer width="20"></p:spacer>
				</h:outputLabel>
				<h:inputSecret style="height:30px;margin-left:44px;margin-top:5px"
					required="true"></h:inputSecret>
				<br />
				<h:outputLabel for="a" value="#{msg['recharge_home_total']}">
					<p:spacer width="20"></p:spacer>
				</h:outputLabel>
				<h:outputText id="a" value="#{rechargeBean.totalStr}$"
					style="color:#FFCC00;font-size:25px;margin-left:25px" />
				<br />

				<h:form id="formpay">

					<h:inputHidden value="#{rechargeBean.total}" id="tong"></h:inputHidden>
					<h:inputHidden value="#{rechargeBean.cardNum}"></h:inputHidden>
					<h:inputHidden value="#{rechargeBean.cusID}"></h:inputHidden>
					<p:commandButton style="margin-left:205px"
						actionListener="#{rechargeBean.Recharge}" value="#{msg['btn_pay']}"
						oncomplete="PF('bar').hide()" update=":growl,:recharge_page"></p:commandButton>
					<p:commandButton style="margin-left:10px" value="#{msg['btn_cancel']}"
						onclick="PF('bar').hide()" type="button" />
				</h:form>
			</div>
		</div>
	</p:notificationBar>

	<ui:insert name="header">
		<ui:include src="/footer/footer_dth.xhtml" />
	</ui:insert>

</h:body>
</html>